<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="search-word" />
    <ul id="suggestions"></ul>
    <script>
        function jsonp(options) {
            return new Promise((resolve, reject) => {
                const { url, jsonp, data } = options;
                //1.或者创建一个临时的、唯一的方法名
                let callbackName = `jQuery_${Date.now()}`;
                //给window添加一个全局变量，变量名为方法，值是一个回调函数
                window[callbackName] = function (data) {
                    //一旦此函数执行了，那么此变量则不再需要了，可以删除销毁了
                    delete window[callbackName];
                    //此时script脚本也不再需要，可以删除掉
                    document.body.removeChild(script);
                    //把data传递给了resolve函数，也就是传递给了成功的回调函数
                    resolve(data);
                }
                //动态创建一个类型为script的对象或者说元素
                let script = document.createElement('script');
                //定义一个查询字符串变量
                //如果url地址里已经有问号了，则用&接着拼接其它的参数，如果没有?,那就用?开头
                let queryStr = url.indexOf('?')===-1?'?':'&';
                for(let key in data){
                    // += `prod=pc&`
                    // += `wd=a&`;
                    queryStr+=`${key}=${data[key]}&`;
                }
                //url=https://www.baidu.com/sugrec
                //queryStr=?prod=pc&wd=a&
                //指定script的来源或者说要访问的脚本的地址
                script.src = `${url}${queryStr}${jsonp}=${callbackName}`;
                //src=https://www.baidu.com/sugrec?prod=pc&wd=a&cb=jQuery_130
                script.onerror = error => reject(error)
                //向body的尾部添加一个script对象
                document.body.appendChild(script);
            });
        }
        //获取关键字输入框DOM元素
        let searchWord = document.getElementById('search-word');
        //获取联想词的下拉列表DOM元素
        let suggestions = document.getElementById('suggestions');
        //给关键字输入框绑定输入事件，当用户在输入框中输入字符串执行回调函数
        searchWord.addEventListener('input', (event) => {
            //调用https://www.baidu.com/sugrec?prod=pc&wd=a&cb=jQuery_222
            //获取事件源的值，也就是关键字输入框的值
            let wd = event.target.value;
            jsonp({
                url: 'https://www.baidu.com/sugrec',//你想请求的url地址
                jsonp: 'cb',//最终希望调用方法名是通过哪个查询参数发送给服务器的cb=jQuery_13000
                data: { prod: 'pc', wd }//其它要传递给服务器的数据，它们都会拼接到查询字符串中
            }).then(result => {
                //获取结果中的g属性
                let { g } = result;
                if (g) {
                    let html = '';
                    for (let i = 0; i < g.length; i++) {
                        html += `<li>${g[i].q}</li>`;
                    }
                    suggestions.innerHTML = html;
                }
            }).catch(error => {
                console.log(error)
            });
        });
    </script>
</body>

</html>